<template>
    <el-checkbox-group v-model="selected" @change="onChange">
      <el-checkbox :label="item.type" v-for="(item, index) in opts" :key="index">{{ item.label }}</el-checkbox>
    </el-checkbox-group>
</template>
<script>
export default {
    props: {
        value: {
            type: [Number, String, null],
            default: null
        }
    },
    watch: {
        value: {
            handler(nv) {
                if(nv) {
                    const arr = []
                    if(nv >= 4) {
                        arr.unshift(4)
                        nv = nv - 4;
                    }
                    if(nv >= 2) {
                        arr.unshift(2)
                        nv = nv - 2;
                    }
                    if(nv>=1) {
                        arr.unshift(1)
                    }
                    this.selected = arr;
                }
            }, 
            immediate: true
        }
    },
    data() {
        return {
            selected: [],
            opts: [
                {
                    type: 1,
                    label: '考勤机'
                },
                {
                    type: 2,
                    label: '小程序打卡'
                },
                {
                    type: 4,
                    label: '工牌打卡'
                },
            ]
        }
    },
    methods: {
        onChange(e) {
            const v = e.reduce((a, b)=> (b | a))
            this.$emit('input', v)
            this.$emit('change',e)
        }
    }
}
</script>